<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div>{{teacher.name}}</div>
    <div>{{teacher.salary}}</div>
    <button @click="timeFly">过了一年</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 监视monet的变化并通告
      money: 100,
      teacher: {
        name: 'sss',
        age: 28,
        salary: 3000
      }
    }
  },
  methods: {
    //工资函数
    salary (num) {
      this.money += num
    },
    timeFly () {
      this.teacher.age += 1
      this.teacher.salary += 500
    }
  },
  watch: {
    //监听目标对象的变化，只要一发生改变就会调用下面的函数。
    "money" (newVal, oldVal) {
      console.log(newVal, oldVal);
      alert("余额为" + newVal + '原来有' + oldVal)
    },
    //要监听复杂数据类型，要精准到属性
    "teacher" (newVal, oldVal) {
      if (newVal, oldVal === 40) {
        alert('您该退休了' + "您的年纪是" + this.teacher.age + "您的工资是" + this.teacher.salary)
      }
    },
    //深度监听,除非有需求，否则大量消耗性能
    "person": {
      //组件一加载，就会调用一次handler
      immediate: true,
      //deep属性开启深度监听，可以监听到复杂数据类型堆里面的改变
      //正常情况下不推荐开启deep，除非需求需要
      deep: true,
      handler (newVal, oldVal) {
        console.log('我被调用了');
        console.log(newVal, oldVal);
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>